<template>
  <p-modal
    :title="'新增'"
    :width="width"
    :visible="visible"
    :confirmLoading="confirmLoading"
    @ok="handleOk"
    :wrapClassName="'siteSourceModal'"
    @cancel="handleCancel"
  >
    <p-spin :spinning="confirmLoading">
      <p-form-model ref="ruleForm" :model="form" :rules="rules">
        <p-form-model-item ref="name" label="工站编码" prop="name">
          <p-input disabled :value="mesPeProcessInfo.processmcode" placeholder="请输入工站代码"></p-input>
        </p-form-model-item>

        <p-form-model-item ref="name" label="工站名称" prop="name">
          <p-input disabled :value="mesPeProcessInfo.processmname" placeholder="请输入工站名称"></p-input>
        </p-form-model-item>

        <p-form-model-item ref="name" label="工站描述" prop="name">
          <p-input disabled :value="mesPeProcessInfo.processsprc" placeholder="请输入工站描述"></p-input>
        </p-form-model-item>

        <p-form-model-item ref="name" label="工站层级" prop="name">
          <p-input disabled :value="mesPeProcessInfo.processlayer" placeholder="请输入工站层级"></p-input>
        </p-form-model-item>

        <p-form-model-item label="资源名称" prop="resourceCode">
          <p-tree-select
            v-model="form.resourceCode"
            @change="treeChange"
            :replaceFields="replaceFields"
            style="width: 100%"
            :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
            :tree-data="selectTreeData"
            placeholder="请选择"
            :load-data="onLoadData"
          />
        </p-form-model-item>
        <!-- <p-form-model-item label="资源名称" prop="resourceCode">
        <p-select placeholder="请选择" v-model="form.resourceCode">
          <p-select-option :title="item.name" :value="item.code" v-for="(item, index) in maintainNameList" :key="item.code">
            {{item.name}}
          </p-select-option>
        </p-select>
        </p-form-model-item>-->
        <p-form-model-item label="资源规格型号" prop="resourceSpecification">
          <p-input placeholder="请输入内容" v-model="form.resourceSpecification" />
        </p-form-model-item>

        <p-form-item label="数量" prop="quantity">
          <p-input-number placeholder="请输入内容" v-model="form.quantity" />
        </p-form-item>
      </p-form-model>
    </p-spin>
  </p-modal>
</template>

<script>
import { postAction, getAction, deleteAction } from "@/api/manage";
import _ from "lodash";
import mesPeProcess from "@/api/mesPeProcess";
export default {
  name: "siteSourceModal",
  components: {},
  props: {
    mesPeProcessId: {
      type: String,
    },
    selectedProcessmcode: {
      type: String,
    },
  },
  data() {
    return {
      mesPeProcessInfo: {
        processmcode: "",
        processmname: "",
        processsprc: "",
        processlayer: "",
      },

      handle: "",
      width: 500,
      visible: false,
      model: {},
      confirmLoading: false,
      replaceFields: {
        children: "children",
        title: "name",
        value: "code",
        key: "id",
      },
      selectTreeData: [],
      maintainTypeList: [],
      maintainNameList: [],
      maintainContentList: [],
      form: {
        resourceCode: "",
        resourceTypeCode: "",
        resourceSpecification: "",
        quantity: 1,
      },
      rules: {
        resourceCode: [
          { required: true, message: "请选择", trigger: "change" },
        ],
        resourceTypeCode: [
          { required: true, message: "请选择", trigger: "change" },
        ],
        resourceSpecification: [
          { required: true, message: "请输内容", trigger: "blur" },
        ],
        quantity: [{ required: true, message: "请输数量", trigger: "blur" }],
      },
      url: {
        info: "/mes-craft/craft/mesPeDefinition/queryByDefinitionId",
        add: "/mes-craft/mesPeResource",
      },
    };
  },
  watch: {
    visible() {
      /* if (this.$refs.ruleForm){
        this.$refs.ruleForm.resetFields();
      } */
    },
  },
  created() {
    this.getEquipmentTypeNode();
    this.getTaskItems();
  },
  methods: {
    getInfo() {
      const params = {
        id: this.mesPeProcessId,
      };
      getAction(this.url.info, params).then((res) => {
        if (res.success) {
          Object.keys(this.mesPeProcessInfo).forEach((ele) => {
            this.mesPeProcessInfo[ele] = res.data[ele];
          });
          console.log("this.mesPeProcessInfo", this.mesPeProcessInfo);
        }
      });
    },

    add() {
      this.getInfo();
      this.visible = true;
      this.form = this.$options.data().form;
    },

    handleOk() {
      const that = this;
      that.$refs.ruleForm.validate((valid) => {
        console.log(this.form);
        const params = {
          mesPeDefinitionId: this.mesPeProcessId,
          processCode: this.mesPeProcessInfo.processmcode,
          ...this.form,
        };
        if (valid) {
          postAction(this.url.add, params).then((res) => {
            if (res.success) {
              that.visible = false;
              this.$emit("ok");
            } else {
              that.$message.warnning(mgs);
            }
          });
        }
      });
    },
    handleCancel() {
      this.visible = false;
      this.$refs.ruleForm.resetFields();
    },
    treeChange(value, label, extra) {
      this.form.resourceTypeCode = extra.triggerNode.dataRef.parentCode;
      mesPeProcess
        .getEquipments({ categoryId: extra.triggerNode.eventKey })
        .then((res) => {
          if (res.code === 0) {
            this.maintainNameList = res.data || [];
          }
        });
    },
    onLoadData(treeNode) {
      const { id, code } = treeNode.dataRef;
      const _this = this;
      return new Promise((resolve) => {
        if (treeNode.dataRef.children) {
          // 有值了直接渲染
          resolve();
          return;
        }
        // 没有值根据当前父节点获取下面子节点并挂在树节点中，添加到对应父节点的children中
        mesPeProcess.getEquipmentTypeNode({ parentId: id }).then((res) => {
          if (res.code === 0) {
            const arr = res.data.map((ele) => {
              (ele.parentCode = code), (ele.disabled = ele.child > 0);
              return ele;
            });
            treeNode.dataRef.children = arr || [];
            _this.selectTreeData = [..._this.selectTreeData];
          }
        });
        resolve();
      });
    },
    getEquipmentTypeNode() {
      mesPeProcess.getEquipmentTypeNode({ parentId: 0 }).then((res) => {
        if (res.code === 0) {
          const arr = res.data.map((ele) => {
            ele.disabled = ele.child > 0;
            return ele;
          });
          this.selectTreeData = arr || [];
        }
      });
    },
    getTaskItems() {
      mesPeProcess.getTaskItems().then((res) => {
        if (res.code === 0) {
          this.maintainContentList = res.data || [];
        }
      });
    },
  },
};
</script>

<style lang="less">
.siteSourceModal {
  .poros-form .poros-form-item {
    display: flex;
  }
  .poros-form-item-label {
    width: 110px;
  }
  .poros-form-item .poros-form-item-control-wrapper {
    overflow: hidden;
  }
}
</style>

